<template>
	<view class="label" v-if="my_label.length || rec_label.length">
		<view class="label-box">
			<view class="label-header">
				<view class="label-header__title">
					我的标签
				</view>
				<view class="label-header__edit" @click="editLabel">
					{{is_edit ? '完成' : '编辑'}}
				</view>
			</view>
			<view class="label-content">
				<view class="label-content__item" v-for="item in my_label" :key="item.id">
				{{item.name}}
				<uni-icons v-if="is_edit" class="icons-close" type="clear" size="20" color="red" @click="removeLabel(item)"></uni-icons>
				</view>
				
				<view class="no-data" v-if="!my_label.length">
					<text>当前没有数据</text>
				</view>
				
			</view>
		</view>
		
		<view class="label-box">
			<view class="label-header">
				<view class="label-header__title">
					标签推荐
				</view>
			</view>
			<view class="label-content">
				<view v-for="item in rec_label" :key="item.id" >
					<view class="label-content__item" @click="addLabel(item)">{{item.name}}</view>
				</view>
				
				<view class="no-data" v-if="!rec_label.length">
					<text>当前没有数据</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {get_label, update_label} from '@/common/api/index.js';
	export default {
		data() {
			return {
				// 判断是否处于编辑状态
				is_edit: false,
				// 我的标签
				my_label: [],
				// 推荐标签
				rec_label: []
			}
		},
		onLoad() {
			// 调用函数
			this.getLabel()
		},
		methods: {
			// 获取标签数据
			getLabel() {
				get_label({
					type: 'all'
				}).then(res => {
					// 获取我的标签
					this.my_label = res.data.filter(item => {
						return item.current
					})
					// 获取推荐标签
					this.rec_label = res.data.filter(item => {
						return !item.current
					})
				})
			},
			// 编辑标签按钮
			editLabel() {
				
				// 开启编辑，不向下执行
				if(!this.is_edit) return this.is_edit = true
				
				// 取消编辑
				this.is_edit = false
				
				let label = []
				
				// 遍历拿出id
				this.my_label.forEach(item => {
					label.push(item._id)
				})
				
				// 发起请求
				this.updateLabel(label)
				
			},
			// 更新标签
			updateLabel(label) {
				update_label({
					label
				}).then(res => {
					// 提示
					uni.showToast({
						title: '更新完成'
					})
					// 通知首页标签发生变化
					uni.$emit('labelChanged')
				})
			},
			// 删除标签
			removeLabel(label) {
				// 获取下标
				const _index = this.my_label.findIndex(item => {
					return item.name === label.name
				})
				
				// 从数组中删除
				this.my_label.splice(_index, 1)
				
				// 向数组中添加
				this.rec_label.push(label)
			},
			// 添加标签
			addLabel(label) {
				// 判断是否为编辑描述
				if(!this.is_edit) return
				
				// 向数组中添加
				this.my_label.push(label)
				
				// 获取下标
				const _index = this.rec_label.findIndex(item => {
					return item.name === label.name
				})
				
				// 从数组中删除
				this.rec_label.splice(_index, 1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.label{
		.label-box{
			background-color: #fff;
			margin-bottom: 20upx;
			.label-header{
				display: flex;
				justify-content: space-between;
				font-size: 28upx;
				color: #666;
				padding: 20upx 30upx;
				border-bottom: 1px solid #f5f5f5;
				.label-header__edit{
					color: #30b33a;
					font-weight: bold;
				}
			}
			.label-content{
				display: flex;
				flex-wrap: wrap;
				padding: 30upx;
				padding-top: 0;
				.label-content__item{
					position: relative;
					padding: 4upx 10upx;
					margin-top: 24upx;
					margin-right: 20upx;
					border-radius: 10upx;
					border: 1px solid #666;
					color: #666;
					font-size: 28upx;
					.icons-close{
						position: absolute;
						top: -16upx;
						right: -16upx;
						background-color: #fff;
						border-radius: 50%;
					}
				}
				.no-data{
					font-size: 28upx;
					height: 150upx;
					line-height: 150upx;
					flex: 1;
					width: 100%;
					text-align: center;
					color: #999;
				}
			}
		}
	}
</style>
